<template>
  <div class="order_item bg_f" @click="goDetail">
    <div class="flex flex-between info_head">
      <p>
        <span>单号: &nbsp;</span>
        <span>{{info.orderId}}</span>
      </p>
      <p :class="info.status==1?'status1':'status2'">{{realInfo.statusName}}</p>
    </div>

    <div class="detail_head">
      <div class="flex flex-between user_msg">
        <p>收件人：{{info.consignee}}</p>
        <p>电话：{{info.consigneePhone}}</p>
      </div>
    </div>

    <div class="flex flex-between info_f time_address color9">
      <p class="color9">
        <span>{{info.createTime}}</span>
      </p>
      <p>{{realInfo.startCity}}->{{realInfo.endCity}}</p>
    </div>

    <div class="total_head">
      <div class="flex flex-between ">
        <p></p>
        <p>总费用：<span class="total">{{info.amount}}</span> 元</p>
      </div>
    </div>

  </div>
</template>

<script>
import enumStatus from "@/utils/enum";
export default {
  props: {
    info: Object,
    type: String
  },
  methods: {
    goDetail() {
      if (this.type == "detail") return;
      this.$router.push("/pages/order/detail/main?orderId=" + this.info.orderId);
    }
  },
  computed: {
    realInfo() {
      let item = this.info;
      enumStatus.orderStatus.forEach(data => {
          if (data.status == item.status) {
             item.statusName=data.name;
          }
      });
      // item.statusName = this.lodash.filter(
      //   enumStatus.orderStatus,
      //   function(data) {
      //     if (data.status == item.status) {
      //       return data.name;
      //     }
      //   }
      // )[0].name;
      console.log(item.statusName)
      console.log(item.status)
      return item;
    }
  }
};
</script>

<style scoped>
.card {
  padding: 10px;
}
.order_item {
  padding: 15px;
  font-size: 14px;
  background-color: #fff;
}
.detail_head {
  font-size: 14px;
  margin: 10px 0px;
}
.time_address {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.total_head {
  font-size: 14px;
  padding: 15px 0px 0px;
  border-top: #999 dashed 1px;
}
.info_head {
  font-size: 16px;
}
.status1 {
  color: #e55b1a;
}
.status2 {
  color: #419435;
}
.total {
  font-size: 20px;
  color: #e55b1a;
}
</style>
